<template>
  <div class="personal">
    <van-nav-bar
      title="个人认证"
      left-arrow
      @click-left="onClickLeft"
      fixed
      placeholder
      safe-area-inset-top
    />
    <div v-if="isValidStatus && ['0', '1', '2'].includes(status)">
      <div class="status-wrap" :style="statuscomputed">
        <p class="title" :style="titleStyled">{{ statusInfo[status].title }}</p>
        <p class="subtitle">{{ basicInfo.failMsg || statusInfo[status].subtitle }}</p>
      </div>
      <div class="idName">{{ basicInfo.idName }}</div>
      <div class="idCard">{{ basicInfo.idCard }}</div>
      <div class="imgwrap">
        <img :src="basicInfo.frontUrl" />
        <img :src="basicInfo.backUrl" />
      </div>
    </div>
    <div v-else>
      <div class="personal-desc">
        <p>实名认证说明：</p>
        <p>1、个人实名认证通过，方可进行企业认证。</p>
        <p>2、信息准确性：请确保提供的姓名、身份证号码等信息准确无误，与本人公安部门数据一致。</p>
        <p>3、上传证件照：需上传清晰的身份证正反面照片，请确保照片清晰、无修改，证件完整。</p>
        <p>
          4、禁止虚假信息：严禁使用虚假或伪造的身份信息进行认证，否则账号将被永久封禁，并可能面临法律后果。
        </p>
        <p>5、唯一性绑定：每个身份证号码仅能绑定一个账号，且身份证有效期需超过3个月。</p>
        <p>6、如遇问题，可联系平台客服获取帮助。</p>
      </div>
      <!-- 表单区域 -->
      <VForm v-model:data="formData" :formOptions="formOptions" @submit="handleFormSubmit"></VForm>
    </div>
  </div>
</template>
<script lang="ts" setup>
import { personalAuth, getPersonalApplyInfo } from '@/api'
import bridge from '@/utils/bridge'
type StatusType = '0' | '1' | '2' | '-1'
const formOptions = ref([
  {
    type: 'input',
    prop: 'idName',
    // label:"姓名",
    placeholder: '请输入身份证姓名',
    required: true,
    message: '请输入身份证姓名'
  },
  {
    type: 'input',
    prop: 'idCard',
    placeholder: '请输入身份证号',
    required: true,
    message: '请输入身份证号'
  },
  {
    type: 'upload',
    prop: 'front',
    required: true,
    message: '请上传身份证正面照',
    uploadType: 'idcardfront'
  },
  {
    type: 'upload',
    prop: 'back',
    required: true,
    message: '请上传身份证背面照',
    uploadType: 'idcardback'
  }
])
const formData = ref({
  idName: '',
  idCard: '',
  front: [],
  back: []
})
const status = ref<StatusType>('-1')
const basicInfo = ref({})
const isValidStatus = computed(() => ['0', '1', '2'].includes(status.value))
const statuscomputed = computed(() => {
  return {
    color: statusInfo.value[status.value].color,
    backgroundColor: statusInfo.value[status.value].bgcolor
  }
})

const statusInfo = ref<{
  [key in Exclude<StatusType, '-1'>]: {
    title: string
    subtitle: string
    color: string
    bgcolor: string
  }
}>({
  '0': {
    title: '认证中',
    subtitle: '个人信息认证中，请耐心等待审核结果！',
    color: '#F1641A',
    bgcolor: 'rgba(241,100,26,0.1)'
  },
  '1': {
    title: '认证成功',
    subtitle: '恭喜您，个人信息认证成功！',
    color: '#32BC05',
    bgcolor: 'rgba(50,188,5,0.1)'
  },
  '2': {
    title: '认证失败',
    subtitle: '失败原因：请上传清晰的身份证照片，不要遮挡身份证号',
    color: '#D65858',
    bgcolor: 'rgba(214,88,88,0.1)'
  }
})
const handleFormSubmit = async (obj) => {
  console.log(obj)
  try {
    let res = await personalAuth({
      idName: obj.idName,
      idCard: obj.idCard,
      front: obj.front[0].ossId,
      back: obj.back[0].ossId
    })
    console.log(res)
    if (res && res.code === 200) {
      showToast('操作成功')
      init()
    }
  } catch (e) {
    console.log(e)
  }
}
const init = async () => {
  // 先查询认证状态 状态（0审核中 1审核通过 2审核驳回）
  let res = await getPersonalApplyInfo()
  console.log(res)
  if (res && res.code === 200 && res.data) {
    basicInfo.value = res.data
    status.value = res.data.status as StatusType
  }
}
const onClickLeft = () => {
  bridge.closeWebView()
}
onMounted(async () => {
  bridge.setNavigationBarVisible({ value: '0' })
  init()
})
</script>
<style lang="scss" scoped>
.personal {
  background-color: #ffffff;
  &-desc {
    background-color: #f5f5f5;
    padding: 15px;
    p {
      font-family:
        PingFang SC,
        PingFang SC;
      font-weight: 400;
      font-size: 13px;
      color: #666666;
      line-height: 24px;
    }
  }
  .status-wrap {
    width: 375px;
    height: 56px;
    padding: 10px 12px;
  }
  .title {
    font-size: 16px;
    font-weight: bold;
    margin-bottom: 2px;
  }
  .subtitle {
    font-size: 14px;
  }
  .idName,
  .idCard {
    width: 351px;
    height: 45px;
    line-height: 45px;
    padding-left: 20px;
    background: #f5f5f5;
    border-radius: 23px 23px 23px 23px;
    border: 1px solid #dddddd;
    margin: 16px 12px 0;
  }

  .imgwrap {
    display: flex;
    flex-direction: column;
    align-items: center;
    img {
      width: 270px;
      height: 160px;
      margin: 20px 0;
    }
  }
}
</style>
